Como utilizar Two way binding para pasar información entre un componente padre y un componente hijo

Para utilizar el Two way binding primero en el padre definimos una variable que estará asociada con el binding (name en este caso):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = "pepe"
}

A continuación en el template del componente padre hacemos el binding entre la variable del componente padre y la del hijo usando el operador [()]

<app-child [(nameHijo)]="name"></app-child>

{{name}}

nameHijo es la variable del componente hijo, y name es la variable del componente padre, a mayores sacamos el contenido de la variable name (que vendrá con las modificaciones realizadas en el componente hijo)

Ahora solo nos queda asignar las variables de entrada y de salida en el componente hijo:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
})
export class ChildComponent implements OnInit {

  @Input() nameHijo!: string;
  @Output() nameHijoChange = new EventEmitter<string>();

  constructor() {
    this.nameHijoChange.emit(`Hola ${this.nameHijo}`);
  }

  ngOnInit(): void {}
}

Utilizamos @Input() para recoger la variable que nos viene del padre y despues (ESTO ES LO IMPORTANTE!!) tenemos que asignar una variable @Output() con el mismo nombre que la de input, pero añadiendo la palabra Change al final, en este caso sería nameHijoChange.

Despues para enviar la variable de vuelta al padre simplemente usamos la funcion emit, en este caso lo hacemos en el constructor, y le concatenamos un string al comienzo para poder ver que la variable ha pasado por el componente hijo

El resultado final es este:

Angular | two way binding